import * as React from "react";
import { lazy, useState } from "react";
import { Button } from "antd";
import { ReactComponent as Logo } from "../images/hospital.svg";
import { ReactElement } from "react";

interface Iprops {
  name: string;
}
const LazyLoading = lazy(() => import("./Loading"));

const HooksDemo = (props: Iprops) => {
  const [clicks, seClicks] = useState({ sun: "你好", shi: "漂亮" });
  const element1 = <h1>Hello 我是1{(()=>("孙士雄"))()}</h1>
  const element:ReactElement=React.createElement('h1',
      {className: 'greeting'},
      'Hello, world!')
  return (
    <div>
      {clicks.sun + clicks.shi}
      <Logo />
      {element}
      {element1}
      <React.Suspense fallback={<div>Loading</div>}>
        <LazyLoading />
      </React.Suspense>
      <Button
        type={"primary"}
        onClick={() => {
          seClicks({ sun: "你好资质花开", shi: "漂亮" });
        }}
      >
        {props.name}
      </Button>
    </div>
  );
};
export default HooksDemo;
